<template>
    <div id="app-container">
      <div id="logi">
        <div id="header" style="display:flex; flex-direction: row; width: 100%;">
          <div style="width: 40%;">
            <div id="logo"><img src="../../assets/logo.jpg" alt=""></div>
          </div>
          <div style="width: 60%; display: flex;flex-direction: row; justify-content: flex-end; margin-right: 5%;">
            <div class="headerinfo"><a href="#">帮助中心</a></div>
            <div class="headerinfo"><a href="#">购物车</a></div>
            <div class="headerinfo"><a href="#">收藏夹</a></div>
            <div class="headerinfo"><a href="#">个人资料</a></div>
            <div class="headerinfo"><a href="#">退出登录</a></div>
            <div><el-avatar style="height: 100%; width: 100%;"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></div>
          </div>
        </div>
      </div>
      
      <form @submit.prevent="handleSubmit" id="an">
        <div id="a">
          <div id="g">账号设置</div>
          <div class="g">安全设置</div>
          <div class="g">个人交易信息</div>
          <div class="g">收货地址</div>
          <div id="c">个人资料</div>
        </div>
        <div id="b">
          <div id="ba">个人资料</div>
          <div id="bb" style="width: 100%; height: 50px;">
            <div style="width:100%; height: 50px; display: flex; justify-content:space-evenly; border-top:1px solid black;border-bottom:1px solid black; align-items: center;">
              <el-row>
                <el-button id="caa" style="width: 100px;line-height: 40px; height: 40px;">
                  个人资料
                </el-button>
                <el-button class="caa" style="width: 100px;line-height: 40px; height: 40px;">
                  个人头像
                </el-button>
              </el-row>
            </div>
          </div>
          <div id="bc" style="display:flex">
            <div> <img src="../../assets/组 1.jpg" alt=""></div>
            <div style="margin: 0px 0px 0px 0px;">上传图片</div>
          </div>
          <div id="bd" style="width:100%;height: 300px;  display: flex;">   
            
            <div>
              <img src="../../assets/1.jpg" alt="" style="width: 300px;height: 300px; margin-left: 100px;">
            </div>
          </div>
         
          
          <div id="bg" style="width: 100%; height: 20px; display: flex; justify-content: center; align-items: center;">
    <button type="submit">保存</button>
  </div>
        </div>
      </form>
    </div>
  </template>
  
  <script setup>

  </script>
  
  <style>
  #header,#footer{
      height: 100px;
      background-color: rgb(255, 174, 0);
    }
  
    #footer{
      height: 200px;
      /* margin-bottom: 0%; */
      position: absolute;
      bottom: 0;
      width: 100%;
    }
  
    .headerinfo{
      right: 5%;
      margin-right: 5%;
      height: 100px;
      line-height: 100px;
      font-size: 20px;
    }
  
    .headerinfo a{
      text-decoration: none;
    } 
  
    #logininfo {
    
      margin-top:5%;
      /* margin-left: 10%; */
      height: 300px;
    }
  
    #logo{
      margin-left: 10%;
      height: 100px;
      width: 150px;
    }
  
    #logo img{
      width: 100%;
      height: 100%;
    }
  
  #an{
      height: 630px;
      width: 1300px;
      /* background-color: red; */
      border: 1px solid rgb(0, 0, 0);
      margin: 0 auto;
      display: flex;
  }
  #a{
      width: 300px;
      height: 630px;
      /* border: 1px solid rgb(254, 6, 6); */
      
      /* background-color: rgb(85, 85, 166); */
  }
  #b{
      width: 1000px;
      height: 630px;
      border: 1px solid rgb(15, 15, 15);
      /* background-color: rgb(114, 147, 169); */
   
  }
  #g{
      height: 40px;
      width: 120px;
      margin:  37px 0px 0px 90px ;
      background-color: rgb(236, 128, 141);
     
      text-align: center;
      font-size: 15px;
      /* 行高 */
      line-height: 40px;
      color: white;
  }
  #c{
      height: 40px;
      width: 120px;
      margin:  37px 0px 0px 90px ;
      background-color: rgb(207, 24, 45);
      text-align: center;
      font-size: 15px;
      line-height: 40px;
      color: white;
  }
  .g{
      height: 40px;
      width: 120px;
      margin:  37px 0px 0px 90px ;
   /* background-color: rgb(85, 85, 166); */
      text-align: center;
      font-size: 15px;
  
      line-height: 40px;
      color: black;
  }
  #ba{
      width: 1000px;
      height: 30x;
      /* border: 1px solid black; */
      display: flex;
      margin: 41px 0px 0px 50px;
      font-size: 40px;
  }
  
  </style>